import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
import { connect } from 'dva';
import dva from 'dva';
import { Row, Col, Card, Form, Input, Icon, Button, Tooltip, Modal } from 'antd';
import FormDesigner from '@/pages/FormDesigner/index';
// import FormDesignerModel from '@/pages/FormDesigner/model';
import styles from './styles.less';
import CatalogInfo from './components/CatalogInfo';
import FormInfo from './components/FormInfo';
import AddCatalog from './components/AddCatalog';
import ElementTab from './components/ElementTab';

const namespace = 'formManage';

function FormManage(props) {
  // const app = dva({});
  // app.model(FormDesignerModel);
  // 获取菜单管理的容器高度 计算出功能组件需沾满的高度
  const catalogEl = useRef();
  const addCatalogEl = useRef();
  // 满屏高度
  const [height, setHeight] = useState('');
  // 功能组件高度
  const [funHeight, setFunHeight] = useState('');

  // 新增目录Modal标题
  const [catalogAddTitle, setCatalogAddTitle] = useState('新增目录');

  useEffect(() => {
    saveFormDrawVisible(false);
    saveSelectForm({});
    saveSelectCatalog({});
  }, []);

  useEffect(() => {
    if (props.catalogAddType === 'add') {
      setCatalogAddTitle('新增主目录');
    } else if (props.catalogAddType === 'edit') {
      setCatalogAddTitle('修改目录');
    } else if (props.catalogAddType === 'addSon') {
      setCatalogAddTitle('新增目录');
    }
  }, [props.catalogAddType]);

  const handleOk = () => {
    addCatalogEl.current.handleAdd().then(res => {
      if (res === true) {
        saveCatalogAddVisible(false);
      }
    });
  };
  const handleCancel = () => {
    saveCatalogAddVisible(false);
  };
  const addModal = () => {
    saveCatalogAddVisible(true);
    saveCatalogAddType('add');
  };

  const backToForm = () => {
    saveFormDrawVisible(false);
  };

  // 通过dva来保存当前的操作状态  值:true/false
  const saveCatalogAddVisible = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveCatalogAddVisible`,
      payload: params,
    });
  };

  // 通过dva来保存当前的操作状态  值:add/edit/addSon
  const saveCatalogAddType = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveCatalogAddType`,
      payload: params,
    });
  };

  // 通过dva来保存表单绘制展示/隐藏标记
  const saveFormDrawVisible = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveFormDrawVisible`,
      payload: params,
    });
  };

  // 通过dva传递菜单列表数据，保存选择表单
  const saveSelectForm = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveSelectForm`,
      payload: params,
    });
  };

  const saveSelectCatalog = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveSelectCatalog`,
      payload: params,
    });
  };

  // effect 监听窗口变化
  useEffect(() => {
    setHeight(props.size.height);
    setFunHeight(props.size.height - catalogEl.current.clientHeight - 8);
  }, [props.size.height]);

  return (
    <div>
      <div
        style={{ display: props.formDrawVisible ? 'none' : 'block' }}
        className={styles.formManage}
      >
        <div className={styles.formManageLeft}>
          <Card
            className="cute"
            title="2"
            style={{ height: height }}
            extra={
              <Tooltip title="新增主目录">
                <Icon type="plus-circle" className={styles.icon_hover} onClick={addModal} />
              </Tooltip>
            }
          >
            <CatalogInfo height={height} />
          </Card>

          {/* 新增目录 */}
          <Modal
            title={catalogAddTitle}
            visible={props.catalogAddVisible}
            onOk={handleOk}
            onCancel={handleCancel}
            width="50%"
            destroyOnClose
          >
            <AddCatalog cRef={addCatalogEl} />
          </Modal>
          {/* **** */}
        </div>
        <div className={styles.formManageRight}>
          <div ref={catalogEl} style={{ margin: '0 0 8px 8px' }}>
            <Card>
              <FormInfo />
            </Card>
          </div>
          <div className={styles.funComponents} style={{ marginLeft: '8px' }}>
            <ElementTab style={{ height: funHeight }} />
          </div>
        </div>
      </div>
      <div style={{ display: props.formDrawVisible ? 'block' : 'none' }}>
        {props.formDrawVisible && props.selectForm.formVersionId !== undefined ? (
          <div>
            <FormDesigner
              formId={props.selectForm.formId}
              formVersionId={props.selectForm.formVersionId}
              onBack={backToForm}
            />
          </div>
        ) : null}
      </div>
    </div>
  );
}

export default connect(({ formManage, setting }) => ({
  catalogAddVisible: formManage.catalogAddVisible,
  catalogAddType: formManage.catalogAddType,
  size: setting.size,
  formDrawVisible: formManage.formDrawVisible,
  selectForm: formManage.selectForm,
}))(FormManage);
